<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>在线时钟</title>
    <link rel="shortcut icon" href="https://raw.githubusercontent.com/ochenkai/myClock/master/clock.ico">
    <link rel="bookmark" href="https://raw.githubusercontent.com/ochenkai/myClock/master/clock.ico">
    <meta name="Keywords" content="在线时钟">
    <meta name="Description" content="一个简单美观的显示当前时间的时钟">
    <style type="text/css">
      body {
        background: black
      }
      
      @font-face {
        font-family: led16sgItalic; /*这里是说明调用来的字体名字*/
        src: url('./led16sgItalic.ttf'); /*这里是字体文件路径*/
      } 
      
      @font-face {
        font-family: ledcounter;
        src: url('./led_counter-7.ttf');
      }
      
      @font-face {
        font-family: ledboard;
        src: url('./led_board-7.ttf');
      }
      
      body {
        font-family: Hei, Helvetica, Arial, sans-serif;
      }
      
      .clock {
        position: absolute;
        opacity: 1
      }

      .fill .clock {
        left: 50%;
        top: 50%
      }

      .centre {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0
      }

      .expand {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%)
      }
      .datesite {
        position: absolute;
        top: 44px;
        left: 0;
        transform: translate(-50%, -50%);
        color: #fff;
        z-index: -1;
        text-align: center;
      }

      .anchor {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0
      }

      .element {
        position: absolute;
        top: 0;
        left: 0
      }

      .round {
        border-radius: 296px
      }

      .circle-1 {
        background: white;
        width: 12px;
        height: 12px
      }

      .circle-2 {
        background: #FA9F22;
        width: 8px;
        height: 8px
      }

      .circle-3 {
        background: black;
        width: 4px;
        height: 4px
      }

      .second {
        transform: rotate(180deg)
      }

      .minute {
        transform: rotate(54deg)
      }

      .second-hand {
        width: 2px;
        height: 164px;
        background: #FA9F22;
        transform: translate(-50%, -100%) translateY(24px)
      }

      .hour {
        transform: rotate(304.5deg)
      }

      .thin-hand {
        width: 4px;
        height: 50px;
        background: white;
        transform: translate(-50%, -100%)
      }

      .fat-hand {
        width: 10px;
        height: 57px;
        border-radius: 10px;
        background: white;
        transform: translate(-50%, -100%) translateY(-18px)
      }

      .minute-hand {
        height: 112px
      }

      .hour-text {
        position: absolute;
        font-size: 40px;
        color: white;
        transform: translate(-50%, -50%)
      }

      .hour-10 {
        padding-left: 0.4ex
      }

      .hour-11 {
        padding-left: 0.25ex
      }

      .minute-text {
        position: absolute;
        font-size: 12px;
        color: white;
        transform: translate(-50%, -50%)
      }

      .minute-line {
        background: white;
        width: 1px;
        height: 9px;
        transform: translate(-50%, -100%) translateY(-131px);
        opacity: 0.34
      }

      .bdsharebuttonbox a {
        background-color: white;
      }
      .selection {
        opacity: 0.1;
        position: fixed;
        top: 3rem;
        right: 3rem;
        z-index: 100;
      }
      .selection:hover {
        opacity: 1.0;
      }
    </style>
  </head>
  <body>
    <div class="fill">
      <div class="selection">
        <select name="colors" onchange="changeTheme()">
          <option value="默认">默认</option>
          <option value="字体1">字体1</option>
          <option value="字体2">字体2</option>
          <option value="字体3">字体3</option>
          <option value="黑">黑</option>
          <option value="白">白</option>
          <option value="浅绿">浅绿</option>
          <option value="浅黄">浅黄</option>
          <option value="浅蓝">浅蓝</option>
        </select>
      </div>
      <div class="reference"></div>
      <div class="clock" id="utility-clock" style="transform: scale(2.939);">
        <div class="centre">
          <div class="dynamic">
            <div class="anchor" style="transform: rotate(6deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(12deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(18deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(24deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -116.9px; left: 67.5px;">05</div>
            <div class="anchor" style="transform: rotate(36deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(42deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(48deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(54deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -67.5px; left: 116.9px;">10</div>
            <div class="anchor" style="transform: rotate(66deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(72deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(78deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(84deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 0px; left: 135px;">15</div>
            <div class="anchor" style="transform: rotate(96deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(102deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(108deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(114deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 67.5px; left: 116.9px;">20</div>
            <div class="anchor" style="transform: rotate(126deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(132deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(138deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(144deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 116.9px; left: 67.5px;">25</div>
            <div class="anchor" style="transform: rotate(156deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(162deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(168deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(174deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 135px; left: 0px;">30</div>
            <div class="anchor" style="transform: rotate(186deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(192deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(198deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(204deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 116.9px; left: -67.5px;">35</div>
            <div class="anchor" style="transform: rotate(216deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(222deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(228deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(234deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 67.5px; left: -116.9px;">40</div>
            <div class="anchor" style="transform: rotate(246deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(252deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(258deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(264deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 0px; left: -135px;">45</div>
            <div class="anchor" style="transform: rotate(276deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(282deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(288deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(294deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -67.5px; left: -116.9px;">50</div>
            <div class="anchor" style="transform: rotate(306deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(312deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(318deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(324deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -116.9px; left: -67.5px;">55</div>
            <div class="anchor" style="transform: rotate(336deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(342deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(348deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(354deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -135px; left: 0px;">60</div>
            <div class="hour-text hour-1" style="top: -90.9px; left: 52.5px;">1</div>
            <div class="hour-text hour-2" style="top: -52.5px; left: 90.9px;">2</div>
            <div class="hour-text hour-3" style="top: 0px; left: 105px;">3</div>
            <div class="hour-text hour-4" style="top: 52.5px; left: 90.9px;">4</div>
            <div class="hour-text hour-5" style="top: 90.9px; left: 52.5px;">5</div>
            <div class="hour-text hour-6" style="top: 105px; left: 0px;">6</div>
            <div class="hour-text hour-7" style="top: 90.9px; left: -52.5px;">7</div>
            <div class="hour-text hour-8" style="top: 52.5px; left: -90.9px;">8</div>
            <div class="hour-text hour-9" style="top: 0px; left: -105px;">9</div>
            <div class="hour-text hour-10" style="top: -52.5px; left: -90.9px;">10</div>
            <div class="hour-text hour-11" style="top: -90.9px; left: -52.5px;">11</div>
            <div class="hour-text hour-12" style="top: -105px; left: 0px;">12</div>
            <div class="anchor" style="transform: rotate(6deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(12deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(18deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(24deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -116.9px; left: 67.5px;">05</div>
            <div class="anchor" style="transform: rotate(36deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(42deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(48deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(54deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -67.5px; left: 116.9px;">10</div>
            <div class="anchor" style="transform: rotate(66deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(72deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(78deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(84deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 0px; left: 135px;">15</div>
            <div class="anchor" style="transform: rotate(96deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(102deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(108deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(114deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 67.5px; left: 116.9px;">20</div>
            <div class="anchor" style="transform: rotate(126deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(132deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(138deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(144deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 116.9px; left: 67.5px;">25</div>
            <div class="anchor" style="transform: rotate(156deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(162deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(168deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(174deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 135px; left: 0px;">30</div>
            <div class="anchor" style="transform: rotate(186deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(192deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(198deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(204deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 116.9px; left: -67.5px;">35</div>
            <div class="anchor" style="transform: rotate(216deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(222deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(228deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(234deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 67.5px; left: -116.9px;">40</div>
            <div class="anchor" style="transform: rotate(246deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(252deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(258deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(264deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 0px; left: -135px;">45</div>
            <div class="anchor" style="transform: rotate(276deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(282deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(288deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(294deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -67.5px; left: -116.9px;">50</div>
            <div class="anchor" style="transform: rotate(306deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(312deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(318deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(324deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -116.9px; left: -67.5px;">55</div>
            <div class="anchor" style="transform: rotate(336deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(342deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(348deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(354deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -135px; left: 0px;">60</div>
            <div class="hour-text hour-1" style="top: -90.9px; left: 52.5px;">1</div>
            <div class="hour-text hour-2" style="top: -52.5px; left: 90.9px;">2</div>
            <div class="hour-text hour-3" style="top: 0px; left: 105px;">3</div>
            <div class="hour-text hour-4" style="top: 52.5px; left: 90.9px;">4</div>
            <div class="hour-text hour-5" style="top: 90.9px; left: 52.5px;">5</div>
            <div class="hour-text hour-6" style="top: 105px; left: 0px;">6</div>
            <div class="hour-text hour-7" style="top: 90.9px; left: -52.5px;">7</div>
            <div class="hour-text hour-8" style="top: 52.5px; left: -90.9px;">8</div>
            <div class="hour-text hour-9" style="top: 0px; left: -105px;">9</div>
            <div class="hour-text hour-10" style="top: -52.5px; left: -90.9px;">10</div>
            <div class="hour-text hour-11" style="top: -90.9px; left: -52.5px;">11</div>
            <div class="hour-text hour-12" style="top: -105px; left: 0px;">12</div>
            <div class="anchor" style="transform: rotate(6deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(12deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(18deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(24deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -116.9px; left: 67.5px;">05</div>
            <div class="anchor" style="transform: rotate(36deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(42deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(48deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(54deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -67.5px; left: 116.9px;">10</div>
            <div class="anchor" style="transform: rotate(66deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(72deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(78deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(84deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 0px; left: 135px;">15</div>
            <div class="anchor" style="transform: rotate(96deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(102deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(108deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(114deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 67.5px; left: 116.9px;">20</div>
            <div class="anchor" style="transform: rotate(126deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(132deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(138deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(144deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 116.9px; left: 67.5px;">25</div>
            <div class="anchor" style="transform: rotate(156deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(162deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(168deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(174deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 135px; left: 0px;">30</div>
            <div class="anchor" style="transform: rotate(186deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(192deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(198deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(204deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 116.9px; left: -67.5px;">35</div>
            <div class="anchor" style="transform: rotate(216deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(222deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(228deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(234deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 67.5px; left: -116.9px;">40</div>
            <div class="anchor" style="transform: rotate(246deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(252deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(258deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(264deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: 0px; left: -135px;">45</div>
            <div class="anchor" style="transform: rotate(276deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(282deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(288deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(294deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -67.5px; left: -116.9px;">50</div>
            <div class="anchor" style="transform: rotate(306deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(312deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(318deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(324deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -116.9px; left: -67.5px;">55</div>
            <div class="anchor" style="transform: rotate(336deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(342deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(348deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="anchor" style="transform: rotate(354deg);">
              <div class="element minute-line"></div>
            </div>
            <div class="minute-text" style="top: -135px; left: 0px;">60</div>
            <div class="hour-text hour-1" style="top: -90.9px; left: 52.5px;">1</div>
            <div class="hour-text hour-2" style="top: -52.5px; left: 90.9px;">2</div>
            <div class="hour-text hour-3" style="top: 0px; left: 105px;">3</div>
            <div class="hour-text hour-4" style="top: 52.5px; left: 90.9px;">4</div>
            <div class="hour-text hour-5" style="top: 90.9px; left: 52.5px;">5</div>
            <div class="hour-text hour-6" style="top: 105px; left: 0px;">6</div>
            <div class="hour-text hour-7" style="top: 90.9px; left: -52.5px;">7</div>
            <div class="hour-text hour-8" style="top: 52.5px; left: -90.9px;">8</div>
            <div class="hour-text hour-9" style="top: 0px; left: -105px;">9</div>
            <div class="hour-text hour-10" style="top: -52.5px; left: -90.9px;">10</div>
            <div class="hour-text hour-11" style="top: -90.9px; left: -52.5px;">11</div>
            <div class="hour-text hour-12" style="top: -105px; left: 0px;">12</div>
          </div>
          <div class="expand round circle-1"></div>
          <div class="anchor hour" style="transform: rotate(633.994deg);">
            <div class="element thin-hand"></div>
            <div class="element fat-hand"></div>
          </div>
          <div class="anchor minute" style="transform: rotate(7607.93deg);">
            <div class="element thin-hand"></div>
            <div class="element fat-hand minute-hand"></div>
          </div>
          <div class="anchor second" style="transform: rotate(456476deg);">
            <div class="element second-hand"></div>
          </div>
          <div class="expand round circle-2"></div>
          <div class="expand round circle-3"></div>
          <p class="datesite" style="width: 200px;"></p>
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
      var clock = document.querySelector('#utility-clock')
      utilityClock(clock)
      if (clock.parentNode.classList.contains('fill')) autoResize(clock, 295 + 32)

      function utilityClock(container) {
        var dynamic = container.querySelector('.dynamic')
        var hourElement = container.querySelector('.hour')
        var minuteElement = container.querySelector('.minute')
        var secondElement = container.querySelector('.second')
        var minute = function(n) {
          return n % 5 == 0 ? minuteText(n) : minuteLine(n)
        }
        var minuteText = function(n) {
          var element = document.createElement('div')
          element.className = 'minute-text'
          element.innerHTML = (n < 10 ? '0' : '') + n
          position(element, n / 60, 135)
          dynamic.appendChild(element)
        }
        var minuteLine = function(n) {
          var anchor = document.createElement('div')
          anchor.className = 'anchor'
          var element = document.createElement('div')
          element.className = 'element minute-line'
          rotate(anchor, n)
          anchor.appendChild(element)
          dynamic.appendChild(anchor)
        }
        var hour = function(n) {
          var element = document.createElement('div')
          element.className = 'hour-text hour-' + n
          element.innerHTML = n
          position(element, n / 12, 105)
          dynamic.appendChild(element)
        }
        var position = function(element, phase, r) {
          var theta = phase * 2 * Math.PI
          element.style.top = (-r * Math.cos(theta)).toFixed(1) + 'px'
          element.style.left = (r * Math.sin(theta)).toFixed(1) + 'px'
        }
        var rotate = function(element, second) {
          element.style.transform = element.style.webkitTransform = 'rotate(' + (second * 6) + 'deg)'
        }
        var animate = function() {
          var now = new Date()
          var time = now.getHours() * 3600 +
            now.getMinutes() * 60 +
            now.getSeconds() * 1 +
            now.getMilliseconds() / 1000
          rotate(secondElement, time)
          rotate(minuteElement, time / 60)
          rotate(hourElement, time / 60 / 12)
          if (now.getMinutes() == 0) {
            makeDate()
          }
          requestAnimationFrame(animate)
        }
        var makeDate = function() {
          var now = new Date()
          var month = now.getMonth() + 1 
          month = month >= 10 ? month : '0' + month
          var day = now.getDate()
          day = day >= 10 ? day : '0' + day
          var dateStr = month + '-' + day
          var dateEle = document.getElementsByClassName('datesite')
          dateEle[0].innerHTML = dateStr
        }
        for (var i = 1; i <= 60; i++) {
          minute(i)
        } 
        for (var i = 1; i <= 12; i++) {
          hour(i)
        }
        animate()
        makeDate()
      }

      function autoResize(element, nativeSize) {
        var update = function() {
          var scale = Math.min(window.innerWidth, window.innerHeight) / nativeSize
          element.style.transform = element.style.webkitTransform = 'scale(' + scale.toFixed(3) + ')'
        }
        update()
        window.addEventListener('resize', update)
      }
      function normalColor () {
        $('.minute-text').css('color','#333');
        $('.minute-line').css('background','#333');
        $('.hour-text').css('color','#333');
        $('.thin-hand').css('background','#333');
        $('.fat-hand').css('background','#333');
        $('.circle-1').css('background','#999');
        $('.circle-2').css('background','#bd3547');
        $('.second-hand').css('background', '#bd3547');
      }
      function blackColor () {
        $('.minute-text').css('color','#fff');
        $('.minute-line').css('background','#fff');
        $('.hour-text').css('color','#fff');
        $('.thin-hand').css('background','#fff');
        $('.fat-hand').css('background','#fff');
        $('.circle-1').css('background','#fff');
        $('.circle-2').css('background','#fa9F22');
        $('.second-hand').css('background', '#fa9F22');
      }
      function changeTheme (e) {
        var body = document.getElementsByTagName('body')[0];
        if (document.getElementsByName('colors')[0].value == '默认') {
          body.style.background="#000";
          body.style.fontFamily="Hei, Helvetica, Arial, sans-serif";
          $('.hour-text').css('font-size','40px')
          blackColor()
        }  else if  (document.getElementsByName('colors')[0].value == '字体1') {
          body.style.fontFamily="led16sgItalic";
          $('.hour-text').css('font-size','35px')
        } else if  (document.getElementsByName('colors')[0].value == '字体2') {
          body.style.fontFamily="ledcounter";
          $('.hour-text').css('font-size','30px')
        } else if  (document.getElementsByName('colors')[0].value == '字体3') {
          body.style.fontFamily="ledboard";
          $('.hour-text').css('font-size','30px')
        } else if  (document.getElementsByName('colors')[0].value == '黑') {
          body.style.background="#000";
          blackColor()
        } else if  (document.getElementsByName('colors')[0].value == '白') {
          body.style.background="#eee";
          normalColor()
        } else if  (document.getElementsByName('colors')[0].value == '浅绿') {
          body.style.background="#efe";
          normalColor()
        } else if  (document.getElementsByName('colors')[0].value == '浅黄') {
          body.style.background="#ffe";
          normalColor()
        } else if  (document.getElementsByName('colors')[0].value == '浅蓝') {
          body.style.background="#eef";
          normalColor()
        }
      }
    </script>
  </body>
</html>
